<script setup lang="ts">
import { ref } from 'vue';

// 遍历: 数组, 对象, 数字
const arr = ref(['苹果', '西瓜', '葡萄', '榴莲'])
const person = ref({ name: 'Jack', age: 18, gender: '男' })
</script>

<template>
  <div class="app-page">
    <!-- 数组遍历 -->
    <!--  (item, index) in arr  -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        序号: {{ index }} ------ {{ item }}
      </li>
    </ul>

    <ul>
      <li v-for="(item) in arr" :key="item">
        {{ item }}
      </li>
    </ul>

    <!-- 对象遍历 -->
    <!-- 
      value:对象中的值
      key:对象中的键
      index:遍历索引从0开始
     -->
    <ul>
      <li v-for="(value, key, index) in person" :key="index">
        键: {{ key }}, 值: {{ value }}, 索引: {{ index }}
      </li>
    </ul>

    <!-- 数字遍历 -->
    <div v-for="item in 20" :key="item">{{ item }}</div>
  </div>
</template>

<style lang="css" scoped></style>
